import React, { useState } from 'react';

import { Form, Input, Modal} from 'antd';
import { String } from 'lodash';
import {  Select, Radio,message } from 'antd';
import { LoadingOutlined, PlusOutlined   } from '@ant-design/icons';
const { Option } = Select;
const FormItem = Form.Item;



export interface TabsFormProps {
  modalVisible: boolean;
  attrlist:API.SysDeviceAttrItem[];
  values?: any;
  onSubmit: (values: String) => void;
  onCancel: () => void;
}
  
const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};
  
const SelectState: React.FC<TabsFormProps> = (props) => {
    const { modalVisible, onSubmit: handleAdd, onCancel,attrlist } = props;
    const [formVals, setFormVals] = useState(props.values);
    const [form] = Form.useForm();
    const okHandle = async () => {
        const fieldsValue = await form.validateFields();
        fieldsValue.i=formVals.i;
        handleAdd(fieldsValue);
    }
      
    


    const changeFileds = async (value,index) =>  
    {
      form.setFieldsValue({"filed":attrlist[value].dispalyName})
      form.setFieldsValue({"text":attrlist[value].browseName})
    }
         
        
    return (
        <Modal
          width={640}
          maskClosable={false}
          destroyOnClose
          title="新增状态"
          visible={modalVisible}
          onOk={okHandle}
          onCancel={() => onCancel()}
        >
          <Form
            {...formLayout}
            initialValues={formVals}
            form={form}
          >
         
            <FormItem
              name="filed"
              hidden={true}>
              <Input  />
            </FormItem>
            <FormItem
              label="选择字段"
              name="filed1"
              rules={[{ required: true}]}
            >
              <Select placeholder="请选择"  onChange={changeFileds}>
                          {attrlist.map((item,index) => (
                            <Option key={item.attrId} value={index}>
                              {item.browseName}
                            </Option>
                        ))}
                          </Select>
            </FormItem>

     
            <FormItem
              label="状态名称"
              name="text"
              rules={[{ required: true}]}
            >
            <Input placeholder="请输入" autoComplete='off' />
          </FormItem>
          <FormItem
              label="颜色"
              name="color"
              rules={[{ required: true}]}
            >
          <Radio.Group >
            <Radio value={'green'}>
              绿色
            </Radio>
            <Radio value={'red'} >
              红色
            </Radio>
            <Radio value={'yellow'}>
              黄色
            </Radio>
          </Radio.Group>
        </FormItem>        
     
 
          </Form>
        </Modal>
      );
};

export default SelectState;